import React from 'react'
import { useState, useRef } from 'react'

import Child from './Child';
type Props = {}

//01: 一般用于在 组件通信的时候, 需要做类型校验
//02: 一般用于定于初始数据的时候,需要类型校验
//03: 使用函数的时候, 对函数的参数和返回值对校验(包括hooks 和 数据请求需要传递的参数的类型校验)

export default function Father({ }: Props) {
    // 定义数据
    // useState 定义数据类型, 在该方法中有一个隐式类型校验, 可以不需要开发者单独校验
    const [username, setUsername] = useState<string>('唐伯虎');

    // 创建一个ref引用
    const ref1 = useRef<HTMLInputElement | null>(null)

    // 定义一个方法修改username
    const editusername = () => {
        setUsername('文征明')
    }
    return (
        <div>
            <p onClick={() => setUsername('100')}>{username}</p>
            {/* 受控组件 */}
            <p>
                <input value={username} onChange={(e) => setUsername(e.target.value)} />
            </p>
            {/* 非受控组件 */}
            <p>
                <input ref={ref1} defaultValue={username} />
                <button onClick={() => {
                    // 01: 第一种写法 使用可选链
                    //  console.log(ref1.current?.value);
                    // 02: 类型断言
                    console.log((ref1.current as HTMLInputElement).value)
                }}>提交</button>
            </p>

            {/* 使用子组件 */}
            <Child editusername={editusername}></Child>

        </div>
    )
}